<template>
  <el-dialog v-model="visible" :width="530" destroy-on-close @close="handleClose" append-to-body draggable :loading="loading">
    <template #header>{{ TitleMap[dialogStatus] }}</template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" size="large" style="width: 95%">
      <el-form-item label="栏目" prop="modelid">
        <MyModel :list="categories" :all="false" v-model="form.modelid" @onChange="onModelChange" style="width: 100%" :disabled="isEdit" />
      </el-form-item>
      <el-form-item label="上级分类" prop="colPid">
        <el-select v-model="form.colPid" placeholder="请选择分类" style="width: 100%">
          <el-option :value="0" label="一级分类" />
          <el-option v-for="item in state.categories" :key="item.id" :value="item.id" :label="item.colTitle" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="colTitle">
        <el-input v-model="form.colTitle" />
      </el-form-item>
      <el-form-item label="排序" prop="ord">
        <el-input-number style="width: 100%" v-model="form.ord" />
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-model="form.description" type="textarea" :rows="5" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit()">确认</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import useLoading from '@/hooks/loading'
import { TitleMap } from '@/config'
import { cloneDeep } from 'lodash'

interface EditProps {
  modelForm: any
  editVisible: boolean
  createData: any
  updateData: any
  setEditVisible: any
  categories: any
  models: any
  title?: string
  dialogStatus: string
}
const props = withDefaults(defineProps<EditProps>(), {
  editVisible: false,
  modelForm: {
    colPid: 0,
    ord: 0,
    title: '',
    description: '',
  },
  title: '',
  dialogStatus: 'create',
  createData: () => {},
  updateData: () => {},
  setEditVisible: () => {},
  models: [],
  categories: [],
})
const { modelForm, categories, models }: any = toRefs(props)
const form = reactive<any>(modelForm)
const { loading, setLoading } = useLoading()
const isEdit = computed(() => props.dialogStatus === 'update')
const formRef = ref<any>(null)
const visible = ref(false)
const rules = {
  colTitle: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' },
  ],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
}
const state = reactive<any>({
  categories: [],
})
const filterCategory = (val: any) => {
  const cur = models.value.filter((item: any) => item.modelid === +val)

  if (cur) {
    state.categories = cur
  }
}

const onModelChange = (value: any) => {
  filterCategory(value.modelid)
  form.value.colPid = null
}

const init = () => {
  filterCategory(form.value.modelid)
  form.value.modelid = { modelid: form.value.modelid }
}

watchEffect(() => {
  isEdit.value && init()
})

watch(
  () => props.editVisible,
  (show) => {
    visible.value = show
  }
)

const handleClose = () => {
  props.setEditVisible()
  formRef.value!.resetFields()
}

// 处理form数据
const handleForm = (form: any) => {
  form.value.colPid = form.value.colPid ?? 0

  if (typeof form.value.modelid === 'object') {
    const temp = form.value.modelid
    form.value.modelid = temp.modelid
    form.value.model = temp.model
  }

  return form
}

const handleSubmit = () => {
  formRef.value
    .validate((valid: any) => {
      if (!valid) return

      const data = unref(handleForm(cloneDeep(form)))
      props.dialogStatus === 'create' ? props.createData(data) : props.updateData(data)
      handleClose()
    })
    .catch((error: any) => {
      console.log('error', error)
    })
    .finally(() => {
      setLoading(false)
    })
}
</script>
<style lang="scss"></style>
